import {
  type FC,
  createElement,
} from 'react'
import classNames from 'classnames'
import { RiArrowRightSLine } from '@remixicon/react'
import { withNativeProps } from '../../utils/native-props'
import { isNodeWithContent } from '../../utils/is-node-with-content'
import type { ListItemProps } from './type'

const classPrefix = 'rt-list-item'

export const ListItem: FC<ListItemProps> = (props) => {
  const {
    arrow,
    clickable,
    disabled = false,
    description,
    extra,
    onClick,
    prefix,
    title,
    children,
  } = props

  const actClickable = clickable ?? !!onClick
  const ActArrow = arrow === undefined ? actClickable : arrow

  const content = (
    <div className={`${classPrefix}-content`}>
      {isNodeWithContent(prefix) && (
        <div className={`${classPrefix}-content-prefix`}>{prefix}</div>
      )}
      <div className={`${classPrefix}-content-main`}>
        {isNodeWithContent(title) && (
          <div className={`${classPrefix}-title`}>{title}</div>
        )}
        {children}
        {isNodeWithContent(description) && (
          <div className={`${classPrefix}-description`}>
            {description}
          </div>
        )}
      </div>
      {isNodeWithContent(extra) && (
        <div className={`${classPrefix}-content-extra`}>{extra}</div>
      )}
      {isNodeWithContent(ActArrow) && (
        <div className={`${classPrefix}-content-arrow`}>
          {ActArrow === true ? <RiArrowRightSLine /> : ActArrow}
        </div>
      )}
    </div>
  )

  return withNativeProps(
    props,
    createElement(
      actClickable ? 'a' : 'div',
      {
        className: classNames(
          classPrefix,
          disabled && `${classPrefix}-disabled`,
        ),
        onClick: disabled ? undefined : onClick,
      },
      content,
    ),
  )
}
